import React, { useState, useDeferredValue } from "react";


export const Searchbox = () => {
    const [kw, setKw] = useState('')

    const change = (e) => {
        setKw(e.target.value)
    }
    // 根据state状态，创建出对应的延迟版本的state状态
    // 相当于把查询结果的渲染设置为低优先级 而不会阻塞input搜索框的渲染
    const defferrKw = useDeferredValue(kw)
    return <div style={{ height: '100vh' }}>
        <input type="text" value={kw} onChange={change}></input>

        {/* 查询结果  */}
        {/* 改进：当频繁输入时，页面渲染是延迟的，我们需要告诉用户内容是旧的，当kw和defferrKw相等时透明度为1，且有个过渡 */}
        <div style={{ opacity: kw !== defferrKw ? 0.3 : 1, transition: 'opacity 0.5s ease' }}>
            <SearchResult query={defferrKw} />
        </div>
    </div>
}

// 当prop没变化时，则将之前的内容缓存不重新渲染 提高了性能
const SearchResult = React.memo((props) => {
    const items = new Array(40000).fill(props.query).map((item, i) => <p key={i}>{item}</p>)
    return <>
        {items}
    </>
})